<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();

import { ref, onMounted } from 'vue';

let userinfo = ref({})


const props = defineProps({
  userInfo: {
    type: Object,
    required: true
  }
});


console.log(props.userInfo.name);

</script>

<template>
    <div id="user-info" @click="router.push('/setinfo')">
        <div class="user-img">
            <img class="avatar"
                :src="props.userInfo.img" alt="">
        </div>
        <div class="user-name">
            <div>{{props.userInfo.name}}</div>
            <div>用户ID:28991176</div>
        </div>
        <div style="position: absolute; right: .9rem;">
            <van-icon name="arrow" />
        </div>
    </div>
</template>

<style scoped lang="less">
#user-info {
    padding: 1.1337rem;
    display: flex;
    background-color: #fff;
    align-items: center;

    .user-img {
        width: 3.4012rem;
        height: 3.4012rem;
        border-radius: 50%;
        // overflow: hidden;
        margin-right: 10px;

        .avatar {
            width: 3.4012rem;
            height: 3.4012rem;
            border-radius: 50%;
        }
    }

    .user-name {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: .5669rem;
    }
}
</style>